<template>
  <div class="login">
    <ul class="ulBox">
      <li class="loginType">
        <p class="active">账号登录</p>
        <p class="">扫码登录</p>
      </li>
      <el-form class="loginContent" :model="{phone, password}" :rules="rules" ref="ruleForm">
        <el-form-item prop="phone">
          <el-input prefix-icon="el-icon-user" placeholder="请输入手机号" v-model="phone" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" type="password" v-model="password" clearable></el-input>
        </el-form-item>
        <p>忘记密码</p>
        <el-button class="loginBtn" type="primary" plain round @click="goLogin">立即登录</el-button>
      </el-form>
      <li class="otherLogin">
        <p class="left">
          <i class="qq-icon"></i>
          <span>QQ</span>
          <span class="line">|</span>
          <i class="wx-icon"></i>
          <span>微信</span>
        </p>
        <router-link to="/register" class="right">立即注册</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import {reqLogin, reqUserInfo} from "@/utils/api"
export default {
  name: "Login",
  data() {
    return {
      phone: "",
      password: "",
      rules: {
        phone: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.phone) return callback(new Error("请输入手机号"));
            if (!/^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$/.test(this.phone))
              return callback(new Error("手机号有误"));
            callback();
          },
        },
        password: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            if (!this.password) return callback(new Error("请输入密码"));
            callback();
          },
        },
      }
    };
  },
  mounted() {
    // console.log(this.$store.commit("GETTOKEN"));
  },
  methods: {
    goLogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let params = {
            phone: this.phone,
            password: this.password,
          }
          // 发送登录请求
          reqLogin(params).then((res) => {
            if(res.code == 200) {
              // 改变仓库的值
              this.$store.commit("GETTOKEN", res.data.token)
              this.$store.commit("GETNICKNAME", res.data.nickName)
              // 将数据存储在本地保持持久化
              localStorage.setItem("token", res.data.token)
              // localStorage.setItem("userInfo", res.data.token)
              localStorage.setItem("nickName", res.data.nickName)
              // 登录成功跳转首页
              this.$router.push({path: '/'})

              // 发送获取用户信息
              reqUserInfo().then((res) => {
                // console.log(res)
              }, (error) => {
                return Promise.reject(new Error(error.message))
              })
            } else {
              this.$message({message: res.message, type: 'error'})
            }
            console.log(res)
          }, (error) => {
            return Promise.reject(new Error(error.message))
          })
        } else {
          this.$message({message: '请按照要求填写', type: 'error'})
        }
      });
    },
  }
};
</script>

<style scoped lang="less">
.login {
  min-height: calc(100vh - 264px);
  background-image: url("./images/login_bg.png");
  display: flex;
  align-items: center;
  flex-direction: row-reverse;

  .ulBox {
    width: 400px;
    height: 400px;
    background: #fff;
    margin-right: 160px;
    border-radius: 8px;
    box-shadow: 0px 0px 20px #909399;

    .loginType {
      display: flex;
      justify-content: space-evenly;
      height: 80px;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
      color: #909399;
      position: relative;
      border-bottom: 1px solid #eee;

      .active {
        position: relative;
        color: #e1251b;
        // border-bottom: 4px solid #e1251b;
        &::after{
          content: "";
          position: absolute;
          bottom: -8px;
          left: 16px;
          width: 40px;
          height: 4px;
          border-radius: 4px;
          background-color: #e1251b;
        }
      }
      
    }

    .loginContent {
      width: 80%;
      margin: 20px auto;

      .loginI {
        position: relative;

        .errorMsg {
          color: #F56C6C;
          font-size: 12px;
          line-height: 1;
          padding-top: 4px;
          position: absolute;
          bottom: -6px;
          left: 0;
        }

      }

      p {
        text-align: right;
        font-size: 12px;
        color: #909399;
      }

      .loginBtn {
        width: 100%;
        margin-top: 20px;
      }
    }

    .otherLogin {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      margin-top: 40px;
      border-top: 1px solid #eee;

      .left {
        display: flex;
        align-items: center;
        font-size: 12px;

        .qq-icon {
          background-position: 0;
        }

        .wx-icon {
          background-position: -19px;
        }

        span {
          padding-left: 6px;
        }

        .line {
          padding-left: 6px;
        }

        i {
          background: url("./images/QQ-weixin.png") no-repeat;
          width: 19px;
          height: 18px;
          display: inline-block;
          // position: absolute;
        }
      }

      .right {
        color: #e1251b;
      }
    }
  }
}
</style>
